<template>
    <div class="PictueLing-div">
         <h4>{{PictueLing.title}}</h4>
        <p class="one">
         <span>{{PictueLing.add_time |binia}}</span>
          <span>点击{{PictueLing.click }}次</span>

        </p>
        <hr/>
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
     <div class="twe" v-html="PictueLing.content"> </div>
     <cmt-box :newid="this.id"></cmt-box>
    </div>
</template>
<script>
import com from './comments/com.vue'
export default { 
    data() {

        return {
           id:this.$route.params.id,
           PictueLing:{},
           slide1:[]
        }
    },
    created() {
         this.getters();
         this.getthumbnail()
    },
    methods: {
        getters(){this.$http.get("api/getimageInfo/"+this.id).then(result =>{
          if (result.body.status ==0) {
                 this.PictueLing=result.body.message[0];
          }
           
        }) },
          getthumbnail(){
            this.$http.get("api/getthumimages/"+this.id).then(
                result =>{
                  //  console.log(result);
                    if (result.body.status ===0) {
                result.body.message.forEach(elet => {
                     elet.w=600;
                     elet.h=400;
                     elet.msrc=elet.src;
                 });
                 this.slide1=result.body.message;}
           
                })},
        handleClose () {
        console.log('close event')
      }
    
    
},
components:{
        "cmt-box":com 
    }
      
}
</script>
<style lang="scss" >
.PictueLing-div{
    h3{
        text-align: center;
        font-size: 20px;
       line-height: 30px;
    }
    .one{
     display:flex;
    justify-content: space-between;
   width: 100%;
   box-sizing: border-box;
   padding: 0 10px;
 


}
.twe{
    font-size: 14px;
}
.my-gallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
     align-content:flex-start;
     figure{
         margin:10px;
     }
    img{
        width: 100px;
        height: 150px;

    }

}

}




</style>
